<template>
  <div>
      <ul>
        <!-- <router-link v-for="(item, index) in list" 
                     :to="'/detail?id=' + item"
                     tag="li" :key="index">
          {{ item.title }}
        </router-link> -->

        <!-- query传参 -->
        <router-link v-for="(item, index) in list" 
                     :to="{
                       path: '/detail',
                       query: {
                         id: item.id
                       }
                     }"
                     tag="li" :key="index">
          {{ item.title }}
        </router-link>
      </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          title: "商品1"
        },
        {
          id: 2,
          title: "商品2"
        },
        {
          id: 3,
          title: "商品3"
        }
      ]
    }
  }
}
</script>

<style scoped>
li {
  height: 60px;
}
</style>